import { Table, Tag, Typography, Space, Card, Row, Col, Statistic, Input, Button, Select } from '@/utils/antd-imports';
import { CheckOutlined, CloseOutlined, SearchOutlined, TeamOutlined } from '@/utils/icons';
import React, { useState } from 'react';













const { Text } = Typography;
const { Option } = Select;

const MembersTab = ({ subProjectsData }) => {
  const [searchText, setSearchText] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');

  // 生成成员数据
  const generateMembersData = () => {
    const membersData = [];
    
    subProjectsData.forEach(subProject => {
      const memberCount = Math.floor(Math.random() * 3) + 3;
      for (let i = 0; i < memberCount; i++) {
        const types = ['公司自由人', '正式员工', '外协人员', '临时工'];
        const statuses = ['正常', '已离项'];
        const priceTypes = ['小时', '日', '月'];
        
        membersData.push({
          id: `${subProject.id}-${i}`,
          subProjectId: subProject.id,
          subProjectName: subProject.name,
          name: `成员${i+1}`,
          startDate: subProject.startDate,
          endDate: subProject.endDate,
          price: Math.floor(Math.random() * 500) + 100,
          priceType: priceTypes[Math.floor(Math.random() * priceTypes.length)],
          type: types[Math.floor(Math.random() * types.length)],
          contactPerson: `对接人${i+1}`,
          lastProjectEndDate: '2025.08.31',
          status: statuses[Math.floor(Math.random() * statuses.length)]
        });
      }
    });
    
    return membersData;
  };

  const allMembersData = generateMembersData();
  
  // 计算统计指标
  const calculateStats = (data) => {
    const total = data.length;
    const active = data.filter(m => m.status === '正常').length;
    const inactive = data.filter(m => m.status === '已离项').length;
    const avgPrice = data.reduce((sum, m) => sum + m.price, 0) / total || 0;
    
    const typeStats = {
      '公司自由人': data.filter(m => m.type === '公司自由人').length,
      '正式员工': data.filter(m => m.type === '正式员工').length,
      '外协人员': data.filter(m => m.type === '外协人员').length,
      '临时工': data.filter(m => m.type === '临时工').length
    };
    
    return {
      total,
      active,
      inactive,
      avgPrice,
      typeStats
    };
  };

  // 筛选数据
  const filteredData = allMembersData.filter(member => {
    const matchesSearch = member.subProjectName.includes(searchText);
    const matchesStatus = statusFilter === 'all' || member.status === statusFilter;
    return matchesSearch && matchesStatus;
  });

  const stats = calculateStats(filteredData);

  // 成员表格列定义
  const memberColumns = [
    {
      title: '子项目名称',
      dataIndex: 'subProjectName',
      key: 'subProjectName',
      width: 200,
      render: (text) => <Text strong>{text}</Text>
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100
    },
    {
      title: '开始时间',
      dataIndex: 'startDate',
      key: 'startDate',
      width: 120
    },
    {
      title: '结束时间',
      dataIndex: 'endDate',
      key: 'endDate',
      width: 120
    },
    {
      title: '单价(元)',
      dataIndex: 'price',
      key: 'price',
      width: 120,
      render: (price) => price ? `${price}` : '-'
    },
    {
      title: '单价类型',
      dataIndex: 'priceType',
      key: 'priceType',
      width: 100,
      render: (text) => text || '-'
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width: 120,
      render: (type) => {
        const colors = {
          '公司自由人': 'blue',
          '正式员工': 'green',
          '外协人员': 'orange',
          '临时工': 'red'
        };
        return (
          <Tag color={colors[type]}>
            {type}
          </Tag>
        );
      }
    },
    {
      title: '对接人',
      dataIndex: 'contactPerson',
      key: 'contactPerson',
      width: 120
    },
    {
      title: '上一个项目结束时间',
      dataIndex: 'lastProjectEndDate',
      key: 'lastProjectEndDate',
      width: 150
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status) => (
        status === '正常' ? 
        <Tag icon={<CheckOutlined />} color="success">正常</Tag> : 
        <Tag icon={<CloseOutlined />} color="error">已离项</Tag>
      )
    }
  ];

  return (
    <div>
      {/* 统计指标卡片 */}
      <div style={{ overflowX: 'auto', marginBottom: 16 }}>
        <div style={{ display: 'flex', minWidth: 'max-content' }}>
          <div style={{ minWidth: '150px', marginRight: 16 }}>
            <Card size="small" style={{ textAlign: 'center' }}>
              <Statistic
                title="总成员数"
                value={stats.total}
                prefix={<TeamOutlined />}
                valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
              />
            </Card>
          </div>
          <div style={{ minWidth: '150px', marginRight: 16 }}>
            <Card size="small" style={{ textAlign: 'center' }}>
              <Statistic
                title="在项成员"
                value={stats.active}
                valueStyle={{ color: '#52c41a', fontSize: '24px', fontWeight: 'bold' }}
              />
            </Card>
          </div>
          <div style={{ minWidth: '150px', marginRight: 16 }}>
            <Card size="small" style={{ textAlign: 'center' }}>
              <Statistic
                title="已离项成员"
                value={stats.inactive}
                valueStyle={{ color: '#ff4d4f', fontSize: '24px', fontWeight: 'bold' }}
              />
            </Card>
          </div>
          <div style={{ minWidth: '150px', marginRight: 16 }}>
            <Card size="small" style={{ textAlign: 'center' }}>
              <Statistic
                title="平均单价"
                value={stats.avgPrice}
                precision={2}
                prefix="¥"
                valueStyle={{ color: '#1890ff', fontSize: '24px', fontWeight: 'bold' }}
              />
            </Card>
          </div>
          {Object.entries(stats.typeStats).map(([type, count]) => (
            <div style={{ minWidth: '150px', marginRight: 16 }} key={type}>
              <Card size="small" style={{ textAlign: 'center' }}>
                <Statistic
                  title={`${type}数量`}
                  value={count}
                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
                />
              </Card>
            </div>
          ))}
        </div>
      </div>
      
      {/* 筛选区域 */}
      <Card style={{ marginBottom: 16 }}>
        <Space>
          <Input
            placeholder="按子项目名称搜索"
            prefix={<SearchOutlined />}
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            style={{ width: 250 }}
          />
          
          <Select
            placeholder="按状态筛选"
            style={{ width: 150 }}
            value={statusFilter}
            onChange={setStatusFilter}
          >
            <Option value="all">全部状态</Option>
            <Option value="正常">正常</Option>
            <Option value="已离项">已离项</Option>
          </Select>
          
          <Button 
            onClick={() => {
              setSearchText('');
              setStatusFilter('all');
            }}
          >
            重置筛选
          </Button>
        </Space>
      </Card>
      
      {/* 成员表格 */}
      <Table
        columns={memberColumns}
        dataSource={filteredData}
        rowKey="id"
        pagination={{ pageSize: 10 }}
        scroll={{ x: 1500 }}
        bordered
        size="middle"
      />
    </div>
  );
};

export default MembersTab;